<template>
  <div class="contents">
    <!-- <PanelTitle title="种植分析" /> -->
    <TabPanelTitle>
      <div class="title-tab">
        <div
          class="title-text"
          @click="
            curPanel = 0;
            initChart();
          "
        >
          种植分析
        </div>
        <div
          class="title-text right-text"
          @click="
            curPanel = 1;
            initChart();
          "
        >
          产量分析
        </div>
      </div>
    </TabPanelTitle>
    <div ref="maps" class="mt maps" v-if="curPanel == 0"></div>
    <div ref="rightmap" class="mt maps" v-else></div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import echarts from "@/components/echarts";
import TabPanelTitle from "../../component/TabPanelTitle.vue";
import PanelTitle from "../../component/PanelTitle.vue";

import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

let curPanel = ref(0);

const maps = ref(null);
const rightmap = ref(null);

let pieData = ref([]);
let legendData = ref([]);
let barOneData = ref([]);
let barTwoData = ref([]);

onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/monitor/variety/distribution/list",
    method: "get",
    params: {
      yearly: new Date().getFullYear()
    }
  });
  
  pieData.value = res.data.map((item) => {
    return {
      value: item.plantAcreage,
      name: item.varietyName,
      ratio: item.plantAcreageRatio
    };
  });

  legendData.value = res.data.map((item) => {
    return item.varietyName;
  });

  barOneData.value = res.data.map((item) => {
    return item.nationYearYield;
  });

  barTwoData.value = res.data.map((item) => {
    return item.yearYield;
  });


  initChart();
});

const initChart = () => {
  nextTick(() => {
    if (curPanel.value == 0) {
      var myChart = echarts.init(maps.value);
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          left: "left",
          icon: "rect",
          itemHeight: fitChartSize(7),
          itemWidth: fitChartSize(7),
          top: "bottom",
          left: "center",
          data: legendData.value,
          textStyle: {
            fontSize: fitChartSize(9),
            color: "#fff",
          },
        },
        title: {
          text: "单位：亩",
          textStyle: {
            fontSize: fitChartSize(9),
            fontWeight: "bold",
            color: "#fff",
          },
          right: fitChartSize(10),
          // subtext: 'Fake Data',
          // left: 'center'
        },
        // color: ["#D4A8FC", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5"],
        series: [
          {
            name: "外边框",
            type: "pie",
            clockWise: false,
            radius: [fitChartSize(30), fitChartSize(55)], //边框大小
            center: ["50%", "50%"], //边框位置
            silent: true,
            itemStyle: {
              normal: {
                color: "rgba(44, 215, 255, .2)",
              },
            },
            labelLine: {
              normal: {
                length: fitChartSize(45),
                length2: fitChartSize(45),
                show: false, // 隐藏所有指示线
              },
            },
            data: [
              {
                value: 0,
                // itemStyle: {
                //   normal: {
                //     borderWidth: 8, //设置边框粗细
                //     borderColor: "rgb(9,37,71, 0.5)", //边框颜色
                //   },
                // },
              },
            ],
          },
          {
            type: "pie",
            radius: [fitChartSize(35), fitChartSize(50)],
            center: ["50%", "50%"],
            itemStyle: {
              // borderRadius: 5,
            },
            labelLine: {
              length: fitChartSize(10),
              length2: fitChartSize(54),
              lineStyle: {
                color: "#2CD7FF",
              },
            },
            labelLayout: {
              width: fitChartSize(90),
              verticalAlign: "bottom",
              align: "center",
              // dy: fitChartSize(-4),
              // dx: -40,
            },
            label: {
              show: true,
              labelLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              normal: {
                formatter: function (e) {
                  return `{a|${e.data.name}：${e.data.ratio}%}`;
                },
                rich: {
                  a: {
                    color: "#2AD0B7",
                    lineHeight: fitChartSize(18),
                    fontSize: fitChartSize(9),
                    align: "left",
                  },
                },
              },
            },
            data: pieData.value,
          },
        ],
      });
    } else {
      var rightmaps = echarts.init(rightmap.value);
      rightmaps.setOption({
        tooltip: {
          show: true,
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "14%",
          top: "5%",
          containLabel: true,
        },
        legend: {
          icon: "circle",
          itemHeight: fitChartSize(5),
          itemWidth: fitChartSize(5),
          top: "bottom",
          left: "center",
          data: [
            {
              name: "全国产量",
              itemStyle: {
                color: "#FAD870",
              },
            },
            {
              name: "柘荣产量",
              itemStyle: {
                color: "#3789FF",
              },
            },
          ],
          textStyle: {
            fontSize: fitChartSize(9),
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "value",
            splitNumber: 4,
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.09)", //线条颜色
                // type: "dashed", //线条样式，默认是实现，dashed是虚线
              },
            },
            min: 0,
            axisLabel: {
              textStyle: {
                color: "#7AFFFD",
                fontSize: fitChartSize(9),
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            data: legendData.value,
            axisLabel: {
              textStyle: {
                color: "#7AFFFD",
                fontSize: fitChartSize(9),
              },
            },
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        title: {
          text: "单位：吨",
          textStyle: {
            fontSize: fitChartSize(9),
            fontWeight: "bold",
            color: "#fff",
          },
          right: fitChartSize(10),
        },
        series: [
          {
            name: "全国产量",
            type: "bar",
            barWidth: fitChartSize(6),
            backgroundStyle: {
              color: "rgba(110, 193, 244, 1)",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgba(55, 137, 255, 0.08)",
                  },
                  {
                    offset: 1,
                    color: "rgba(55, 137, 255, 1)",
                  },
                ]),
              },
            },
            data: barOneData.value,
          },
          {
            name: "柘荣产量",
            type: "bar",
            barWidth: fitChartSize(6),
            backgroundStyle: {
              color: "rgba(110, 193, 244, 1)",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgba(250, 216, 112, 0.08)",
                  },
                  {
                    offset: 1,
                    color: "rgba(250, 216, 112, 1)",
                  },
                ]),
              },
            },
            data: barTwoData.value,
          },
        ],
      });
    }
  });
};
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}
.maps {
  height: vh(190);
  width: 100%;
}

.title-tab {
  display: flex;
}
.title-text {
  line-height: vw(30);
  margin-left: vw(60);
  font-size: vw(14);
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(0deg, #7ae3ff 0%, #ffffff 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
}
.right-text {
  margin-left: vw(14);
}
</style>